<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <!-- <p style="font-size: 25px">计算器{{counter}}</p>
      <button @click="counter++" style="font-size: 25px">监听</button> -->

      <p>
        Ask a yes/no question
        <input v-model="question" />
      </p>
      <p>{{answer}}</p>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      // let vm = new Vue({
      //   el: '#app',
      //   data: {
      //     counter: 1,
      //   },
      // })

      let vm = new Vue({
        el: '#app',
        data: {
          question: '',
          answer: 'I cannot ggive you an answer until ou ask a question!',
        },
        watch: {
          //如果question发生改变，这个函数就会运行
          question: function (newQuestion, oldQuestion) {
            this.answer = 'Waiting for you to stop typing'
          },
          created: function () {
            this.debouncedGetAnswer = _.debounce(this.getAnswer, 500)
          },
          methods: {
            getAnswer: function () {
              if (this.question.indexOf('?') === -1) {
                this.answer = 'Question usually contain a question mark .;'
                return
              }
              var vm = this
              axios
                .get('https://yesno.wtf/api')
                .then(function (response) {
                  vm.answer = _.capitalize(response.data.answer)
                })
                .catch(function (error) {
                  vm.answer = 'Error! Could not reach the API. ' + error
                })
            },
          },
        },
      })

      // vm.$watch('counter', function (nval, oval) {
      //   alert('计算器数值变化：' + oval + '变为：' + nval + '!')
      // })
    </script>
  </body>
</html>
